<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="alternate icon" class="js-site-favicon" type="image/png" href="images/favicon.png">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/header.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/common.css">
  <!-- <link rel="stylesheet" href="css/study.css"> -->
  <link rel="stylesheet" href="css/free.css">
  <!-- 引入jQuery模块 -->
  <script src="utils/host.js"></script>
  
  <script src="./js/static/jq.js"></script>
  <script src="./js/static/axios.min.js"></script>


  <script src="js/common.js"></script>
  <!-- 引入bootstrap.js模块 -->
  <script src="./js/static/boot.js"></script>
      <link href="./js/static/boot.css" rel="stylesheet">

  <title>自由练习</title>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">
          <img alt="Brand" src="images/brand.png" class="my-brand">
        </a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav module-left">
          <li><a href="index.html">首页 </a></li>
          <li><a href="study.html" >新手指南</a></li>
          <li>
            <a  href="#" class="dropdown-toggle color-yellow" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                练习程序<span class="caret"></span>
                <ul class="dropdown-menu">
              
                  <li><a href="practice_light.html">光华字根进阶练习</a></li>
                  <li><a href="practice_star.html">星陈字根入门练习</a></li>
                  <li><a href="practice_toy.html">卿云字根进阶练习</a></li>

                  <!--
                  <li><a href="practisePro.html">必拆字练习</a></li>
                  <li><a href="freePractise.html">自由练习</a></li>
				  -->

                  <!-- <li role="separator" class="divider"></li> -->
                </ul>
        </li>
          <li><a href="search.html">拆分查询<span class="sr-only"></span></a></li>

          <li><a href="download.html">下载安装<span class="sr-only"></span></a></li>
          <!--li><a href="tools.html">实用工具<span class="sr-only"></span></a></li-->

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              加入组织<span class="caret"></span></a>
            <ul class="dropdown-menu">
              
                <li><a href="https://jq.qq.com/?_wv=1027&k=2OYDP4Tk">宇浩官方群</a></li>
                <li><a href="https://t.me/yuhaoim">Telegram群</a></li>
                <li><a href="https://github.com/forFudan/yuhao/">Gihub官方仓库</a></li>
                                
                <!-- <li role="separator" class="divider"></li> -->
            </ul>
          </li>
          <li><a href="https://kylebing.cn/tools/typepad/">玫枫跟打<span class="sr-only"></span></a></li>


        </ul>
        <ul class="nav navbar-nav navbar-right module-right logbtn-box">
          <li><a href="login.html" class="login-btn brand-btn">登录</a></li>
          <li><a href="register.html" class="sign_up-btn brand-btn">注册</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right module-right hidden">
    <li class="hello"><span  ><span id="loginTime"></span>，<span id="uname"></span><span><a href="#" id="logout"> 注销</a></span></span></li>
         
        </ul> 
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
  <div class="main-content">
    <div class="container">
      <div class="row mt-10">
        <div class="col-md-2"></div>
        <div class="col-md-8 pt-20 bg-white primary-shadow study">
            <div class="h-100">
                <div class="btn_area">
                    <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" class="btn btn-info">载文</button>
                    <button type="button" class="btn btn-info" onclick="reRow()">重打</button>
                    <div>
                        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-info dropdown-toggle">选文<span class="caret"></span></button>
                        <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
                            <li><a href="#" onclick="bichai(0)">必拆字</a></li>
                            <li><a href="#" onclick="bichai(1)">必拆字（乱序）</a></li>
                            <li><a href="#" onclick="qian500(1)">常用前500（乱序）</a></li>
                            <li><a href="#" onclick="zhong500()">常用中500（乱序）</a></li>
                            <li><a href="#" onclick="hou500()">常用后500（乱序）</a></li>

                            <li role="separator" class="divider"></li>
                            <li><a href="#" onclick="hu1jian(1)">虎码一简字</a></li>
                            <li><a href="#" onclick="sanma()">虎码三码字</a></li>

                            <li role="separator" class="divider"></li>
                            <li><a href="#" onclick="huanjie()">黄阶挑战</a></li>
                            <li><a href="#" onclick="xuanjie()">玄阶挑战</a></li>
                            <li><a href="#" onclick="dijie()">地阶挑战</a></li>
                            <li><a href="#" onclick="tianjie()">天阶挑战</a></li>
                            <li><a href="#" onclick="rumo()">神级挑战</a></li>

                          </ul>
                    </div>
                    <button type="button" class="btn btn-danger" id="all" onclick="changeMainRoot('all')">全文</button>
                    <button type="button" class="btn btn-info" id="diff" onclick="changeMainRoot('diff')">分段</button>

                </div>
                <div class="show_area">
                    <span class="show_text"></span>
                </div>
                    <textarea id="input" class="form-control" style="display: inline-block;" type="text" oninput="inputChanged()"></textarea>
                <div class="speed_area">
                    <div class="count_number">段号：<span id="cnumber"></span></div>
                    <div class="count_number">速度：<span id="speed"></span></div>
                    <div class="my_process">进度：<span id="mpreocess"></span>%</div>
                    <div class="my_process">退格：<span id="backspace"></span></div>

                </div>
                <div class="color-box  login-color-box">
                   
                    <div class="box4" onclick="checkChar()">
                      <div class="title">拆分</div>
                    </div>
                  <div class="box3" onclick="checkCode()">
                    <div class="title">编码</div>
                  </div>
                </div>
                <div class="log_box">
                  <div class="log_header">
                    <div>序号</div>
                    <div>速度</div>
                    <div>时间</div>
                    <div>回改</div>
                  </div>
                  <div class="log_body">
                   
                  </div>
                </div>
            </div>
            
        </div>
        <div class="col-md-2"></div>
      </div>

    </div>
  </div>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">载入文章</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="message-text" class="control-label">文本:</label>
            <textarea class="form-control form_text" id="message_text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-warning" onclick="lrxu()">全部乱序</button>

        <button type="button" class="btn btn-primary" onclick="loadText()">载文</button>
      </div>
    </div>
  </div>
</div>

  <div class="footer hidden visible-lg">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        <img src="images/brand.png" alt="helloworld综合资源web服务" class="my-brand1">
        <p class="footer-title1">宇浩输入法  </p>
      </div>
      <div class="col-xs-12 col-md-4">
        <ul class="rec-list flex-col">
          <li><span class="footer-title">友情链接</span></li>
          <li><a href="https://rime.im/">Rime输入法引擎</a></li>
          <li><a href="https://www.jsxiaoshi.com/">极速打字网</a></li>
          <li><a href="http://xumax.cn/">徐码输入法</a></li>
          <li><a href="http://cjhk.org/">仓颉输入法</a></li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-4">
        <ul class="about-list flex-col">
          <li><span class="footer-title">关于</span></li>
          <li><a href="#">关于宇浩码</a></li>
          <li><a href="#inter">关于作者</a></li>
          
        </ul>
      </div>
    </div>
  </div>
  <style>


@font-face {
        font-family: 'YuhaoSongti';
        src: url("./fonts/YuhaoSongti.ttf");
        /*src: url("https://zhuyuhao.com/yuhao/fonts/YuhaoSongti.ttf");*/
    }

#root {
  font-family: YuhaoSongti, Consolas, Lucida Console, Helvetica, Arial, Times New Roman, Georgia, TumanPUA, Simsun, Simsum-ExtB, Simsun-ExtG, TH-Sung-TP2, TH-Sung-TP0, serif, sans-serif !important;
  

    margin: auto;
    font-size: 5rem;
    text-align: center;
    width: 100%;
}

#code {
    margin: auto;
    font-size: 3.5rem;
    text-align: center;
    width: 100%;
}

    #tip {
        font-size: 13px;
        margin-top: 1.5rem;
    }



    .center80 {
        margin: auto;
        position: absolute;
        top: 20%;
        font-size: 30px;


        text-align: center;
        width: 100%;

    }

    .top {
        margin: auto;

        text-align: center;
        width: 100%;	
        font-size: small;		
    }


    .floatleft {
        margin: 0.3rem;
        text-align: center;
        float: left;
    
    }



    .floatright {
        margin: 0.3rem;
        text-align: center;
        float: right;
        clear: right;

    }




    
    </style>
    
    <script src="js/free.js"></script>
    <script id="allow-copy_script">(function e(){var e=!1;document.addEventListener("allow_copy",(function(t){e=t.detail.unlock}));var t=["copy","cut","contextmenu","selectstart","mousedown","mouseup","mousemove","keydown","keypress","keyup"],n=function(t){e&&(t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation())};t.forEach((function(e){document.documentElement.addEventListener(e,n,{capture:!0})}))})()</script>
</body>
</html>
